<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>积分记录</title>
    <script src="js/jquery.min.js"></script>
    <script>
        //页面加载时触发
        $(function(){
            //查询欢乐豆记录的接口
            queryHistoryList();
        });

        //查询欢乐豆流水列表
        function queryHistoryList(){

            //获取当前登录用户id
            var uid = localStorage.getItem("uid");
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/bean/list",
                data: {
                    uid: uid
                },
                success: function(data){
                    console.log(data);

                    //data -> 记录列表
                    //for -> data -> <tr></tr> -> <tbody>
                    for(var i = 0; i < data.length; i++){
                        //从data数组中取出第i条记录
                        var item = data[i];

                        var source = "";
                        if(item.source == 0){
                            source = "充值";
                        } else if(item.source == 1){
                            source = "对局";
                        } else if(item.source == 2){
                            source = "系统赠送";
                        }

                        var html = "<tr><td>" + item.id + "</td> <td>"
                            + (item.type == 0 ? "+" : "-") + item.beanNumber + "</td> <td>"
                            + item.createTime + "</td> <td>"
                            + source + "</td></tr>";

                        $("#mytbody").append(html);
                    }
                }
            });
        }
    </script>
</head>
<body>
<h1>欢乐豆记录列表</h1>

<table border="1">
    <thead>
    <tr>
        <td>编号</td>
        <td>欢乐豆操作数</td>
        <td>操作时间</td>
        <td>操作类型</td>
    </tr>
    </thead>
    <tbody id="mytbody">

    </tbody>
</table>
</body>
</html>